<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>promise的几个关键问题2</title>
	</head>

	<body>
		<script>
			/* 
			    3.改变promise状态和指定回调函数谁先谁后?
			      (1)都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
			      (2)如何先改状态再指定回调?
			        ①在执行器中直接调用resolve()/reject()
			        ②延迟更长时间才调用then()
			      (3)什么时候才能得到数据?
			        ①如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
			        ②如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
			*/
			// 常规: 先指定回调函数, 后改变的状态
			new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(1) // 后改变的状态(同时指定数据), 异步执行回调函数
				}, 1000)
			}).then( // 先指定回调函数, 保存当前指定的回调函数
				value => {
					console.log('value1', value)
				},
				reason => {
					console.log('reason1', reason)
				}
			)

			// 如何先改状态, 后指定回调函数
			new Promise((resolve, reject) => {
				resolve(1) // 先改变的状态(同时指定数据)
			}).then( // 后指定回调函数, 异步执行回调函数
				value => {
					console.log('value2', value)
				},
				reason => {
					console.log('reason2', reason)
				}
			)
			console.log('-------')

			const p = new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(1) // 后改变的状态(同时指定数据), 异步执行回调函数
				}, 1000)
			})

			p.then(
				value => {
					console.log('value3', value)
				},
				reason => {
					console.log('reason3', reason)
				}
			)

			const p2 = new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(1) // 先改变的状态(同时指定数据)
				}, 1000)
			})

			setTimeout(() => { // 后指定回调函数, 异步执行回调函数
				p2.then(
					value => {
						console.log('value4', value)
					},
					reason => {
						console.log('reason4', reason)
					}
				)
			}, 1100)
		</script>
	</body>

</html>